<template>
  <div>
    <el-card class="custom-card">
      <el-row>
        <el-col :span="80" :offset="16">
          <el-input placeholder="请输入类目名称" v-model="searchQuery">
            <i class="el-icon-search" slot="suffix" @click="search" style="line-height: 40px"></i>
          </el-input>
        </el-col>
        <el-col :span="3" :offset="1">
          <el-button type="primary" @click="add_booktype">添加类型</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 表格显示区 -->
    <el-card class="table-card">
      <el-table :data="currentTableData" border style="width: 1000px;left: 250px">
        <el-table-column prop="bt_id" label="书籍类别ID" width="500"></el-table-column>
        <el-table-column prop="bt_name" label="书籍类别名称" width="500"></el-table-column>

        <!-- 表格的操作栏 -->
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="delete_booktype(scope.row)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="filteredTableData.length">
        </el-pagination>
      </div>
    </el-card>
    <!-- 添加用户对话框-->
    <el-dialog
        @close="closeDialog"
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <el-form-item label="请输入书籍类型名" :label-width="formLabelWidth"  prop="bt_name">
        <el-input v-model="booktype.bt_name" autocomplete="off"></el-input>
      </el-form-item>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="subForm">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  created() {
    this.getBookTypeList();
  },
  data() {
    return {
      isdisable:false,//账号框是否禁用
      formLabelWidth: '120px',
      rules: {
       bt_name:[
          {required: true, message: '请输入书籍类型', trigger: 'blur'},
        ],
      },
      booktype:{
       bt_name:""
      },
      dialogVisible: false,
      dialogTitle:"",
      searchQuery: '',
      tableData: [],
      currentPage: 1, // 当前页码
      pageSize: 5,   // 每页显示条数
    };
  },
  computed: {
    filteredTableData() {
      if (!this.searchQuery) return this.tableData;
      return this.tableData.filter(item => {
        return Object.values(item).some(val => val.toString().includes(this.searchQuery));
      });
    },
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.filteredTableData.slice(start, end);
    }
  },
  methods: {
    // 获取用户数据
    async getBookTypeList() {
        const { data: res } = await this.$axios.get("/booktype/listBookType");
        console.log(res)
        this.tableData = res.data;
    },
    search() {
      console.log('搜索关键词:', this.searchQuery);
      // 在这里添加实际的搜索逻辑
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1; // 重置到第一页
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //关闭对话框
    closeDialog(){
      this.$refs.booktype.resetFields();//重置表单
      this.formData = new FormData();//重置formData对象的数据
      this.booktype={//重置booktype对象
        bt_name:"",
      }
      this.getBookTypeList()
    },
    // 提交表单
    subForm(){
      this.$refs.booktype.validate(async (valid) => {
        if (valid){
          //请求后端添加书籍类型接口
          const {data:res} = await this.$axios.post("/booktype/addBookType",this.booktype)
          if (res.data){
            console.log(res)
            this.$message.success("操作成功")
            this.dialogVisible = false
            await this.getBookTypeList()
          }else {
            this.$message.error("添加失败")
            return false;
          }
        }
      })
    },
    //添加用户
    add_booktype(){
      this.dialogVisible = true
      this.dialogTitle="添加用户"
      this.isdisable=false
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    //删除用户
    delete_booktype(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const {data: res} = await this.$axios.get("/booktype/deleteBookType", {params: {bt_id:row.bt_id}})
        if (res.data){
          this.$message.success('删除成功')
          await this.getBookTypeList()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
  }
};
</script>

<style scoped>
.custom-card {
  margin-top: 10px;
}

.table-card {
  margin-top: 10px;
  padding: 20px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
